<div class="cluster-navigation ">
    <div class="summary-loader" ng-if="clusterNavCtrl.fetching">
        <div>
            Loading Cluster information <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div ng-if="!!clusterNavCtrl.fetched" class="summary-container" ng-cloak>
        <div class="row">
            <div class="col-md-4">
                <div class="cluster-name"><i class="fa fa-heartbeat icon-label {{clusterNavCtrl.summary.status}}"></i>
                    <a ui-sref="clusterDetails({clusterName: clusterNavCtrl.clusterName})">{{clusterNavCtrl.clusterName}}</a>
                    <small>{{clusterNavCtrl.summary.version}}</small>
                </div>

            </div>
            <div class="col-md-8">
                <div class="btn-group pull-right">
                    <div class="btn-group" uib-dropdown>
                        <button type="button" class="btn btn-info dropdown-toggle" uib-dropdown-toggle
                                ng-disabled="disabled"><i class="fa fa-list"></i>
                            Indices <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                            <li role="menuitem"><a ui-sref-active="active"
                                                   ui-sref="clusterIndices({ clusterName: clusterNavCtrl.clusterName })"
                                                   tooltip-placement="left"
                                                   uib-tooltip="Indices Summary">
                                Indices Summary</a></li>
                            <li role="menuitem"><a ui-sref-active="active"
                                                   ui-sref="clusterAliases({ clusterName: clusterNavCtrl.clusterName })"
                                                   tooltip-placement="left"
                                                   uib-tooltip="Aliases">Aliases</a></li>
                            <li role="menuitem">
                                <a ui-sref-active="active"
                                   ui-sref="clusterSnapshots({clusterName: clusterNavCtrl.clusterName })"
                                   tooltip-placement="left"
                                   uib-tooltip="Snapshot and Restore Information">Snapshots</a></li>
                            <li role="menuitem"><a ui-sref-active="active"
                                                   ui-sref="clusterClosedIndices({ clusterName: clusterNavCtrl.clusterName })"
                                                   tooltip-placement="left"
                                                   uib-tooltip="Closed Indices">Closed Indices</a></li>
                            <li role="menuitem" ng-if="clusterNavCtrl.showDeleted"><a ui-sref-active="active"
                                                   ui-sref="clusterDeletedIndices({ clusterName: clusterNavCtrl.clusterName })"
                                                   tooltip-placement="left"
                                                   uib-tooltip="View deleted indices.">Deleted Indices</a></li>


                        </ul>
                    </div>

                    <a class="btn btn-info" ui-sref-active="active"
                       ui-sref="clusterNodes({ clusterName: clusterNavCtrl.clusterName })"
                       tooltip-placement="bottom"
                       uib-tooltip="Performance Graphs"><i class="fa fa-line-chart"></i>
                        Metrics</a>
                    <div class="btn-group" uib-dropdown>
                        <button id="siqngle-button" type="button" class="btn btn-info" uib-dropdown-toggle><i
                                class="fa fa-dot-circle-o"></i>
                            Nodes <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
                            <li ng-repeat="node in clusterNavCtrl.summary.nodes">
                                <a href
                                   ui-sref="clusterNodeDetails({clusterName: clusterNavCtrl.clusterName, nodeId: node.node_id})"

                                   tooltip-placement="right"
                                   uib-tooltip="{{node.name}} {{node.host}}"><i ng-if="node.is_master_node === true"
                                                                                class="fa fa-star"></i>
                                    {{node.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <a class="btn btn-info" ui-sref-active="active"
                       ui-sref="diagnostics({clusterName: clusterNavCtrl.clusterName })"
                       tooltip-placement="bottom"
                       uib-tooltip="Diagnostics information"><i class="fa fa-ambulance"></i> Diagnostics</a>
                    <a class="btn btn-info" ui-sref-active="active"
                       ui-sref="restapi.endpoints({clusterName: clusterNavCtrl.clusterName })"
                       tooltip-placement="bottom"
                       uib-tooltip="JSON information"><i class="fa fa-code"></i> REST</a>
                    <a class="btn btn-info" ui-sref-active="active"
                       ui-sref="query({clusterName: clusterNavCtrl.clusterName })"
                       tooltip-placement="bottom"
                       uib-tooltip="Query Index"><i class="fa fa-search"></i> Query</a>

                </div>
            </div>
        </div>
        <div class="divider-3"></div>
    </div>
</div>